<template>
  <el-form ref="formRef" :rules="rules" :model="form" size="medium">
    <el-form-item prop="username">
      <el-input :prefix-icon="Search" v-model="form.username" placeholder="请输入登录账号"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input :prefix-icon="Search" v-model="form.password" placeholder="请输入登录密码" show-password></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" style="width:100%" @click="submitForm">登 录</el-button>
    </el-form-item>
  </el-form>
  <p style="text-align: center;color: red;">账号密码随便输入</p>
</template>
<script>
import { defineComponent, reactive, computed, ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElLoading } from 'element-plus'
export default defineComponent({
  setup() {
    const $route = useRouter()
    const store = useStore()
    const formRef = ref()
    const form = reactive({
      username: 'admin',
      password: '123456',
    })
    const rules = reactive({
      username: [
        {
          required: true,
          message: '请输入登录账号',
          trigger: 'change',
        },
      ],
      password: [
        {
          required: true,
          message: '请输入登录密码',
          trigger: 'change',
        },
        {
          min: 6,
          message: '密码长度最小6位',
          trigger: 'blur',
        },
      ],
    })
    const tagWel = computed(() => store.getters.tagWel)

    const submitForm = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
          })
          store
            .dispatch('LoginByUserName', form)
            .then(() => {
              loading.close()
              store.commit('SET_TOP_MENU_INDEX', 0)
              $route.push({ path: tagWel.value.value })
            })
            .catch(() => {
              loading.close()
            })
        }
      })
    }
    return {
      form,
      rules,
      formRef,
      submitForm,
    }
  },
})
</script>
